<template>
	<view class="continer">
		<navBar name="车辆详情"></navBar>
		<scroll-view scroll-y="true" class="scroll-Y">
			<nut-cell title="车牌号" :desc="currVehicleInfo.headLicensePlateNo"></nut-cell>
			<nut-cell title="车牌颜色" :desc="currVehicleInfo.licensePlateType"></nut-cell>
			<nut-cell title="车型" :desc="currVehicleInfo.truckType"></nut-cell>
			<nut-cell title="车长" :desc="currVehicleInfo.truckLength"></nut-cell>
			<nut-cell title="车宽"
				:desc="currVehicleInfo.headCarriageSize && currVehicleInfo.headCarriageSize.split('x')[1]"></nut-cell>
			<nut-cell title="车高"
				:desc="currVehicleInfo.headCarriageSize && currVehicleInfo.headCarriageSize.split('x')[2]"></nut-cell>
			<nut-cell title="载重" :desc="currVehicleInfo.carryingCapacity"></nut-cell>
			<nut-cell title="车辆识别代号" :desc="currVehicleInfo.vin"></nut-cell>
			<nut-cell title="道路运输许可证号" :desc="currVehicleInfo.headTaxiLicenseNo"></nut-cell>
			<nut-cell title="经营业户名称" :desc="currVehicleInfo.headOwner"></nut-cell>
			<nut-cell title="行驶证发证日期" :desc="currVehicleInfo.headIssueDate"></nut-cell>
			<nut-cell title="行驶证有效期止" :desc="currVehicleInfo.headDrivingLicenseValidity"></nut-cell>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getVehicleInfo
	} from '@/api/vehicleInfo.js'

	const agentTruckId = ref(null)
	const currVehicleInfo = ref({})

	onLoad(({
		id
	}) => {
		agentTruckId.value = id
		currVehicleInfo.value = uni.getStorageSync('_currVehicleInfo') || {}
		getDetail(agentTruckId.value)
	})

	// 详情
	const getDetail = async (agentTruckId) => {
		const {
			agentTruck,
			truck
		} = await getVehicleInfo(agentTruckId)
		Object.assign(currVehicleInfo.value, agentTruck, truck)
	}
</script>

<style scoped lang="scss">
	.continer {
		height: 100vh;
		overflow: hidden;
		--nut-cell-color: #666;
		--nut-cell-desc-color: #333;

		.scroll-Y {
			height: calc(100vh - 150rpx);
		}
	}
</style>